<template>
	<view class="votes">
		<view class="top getmain">
			<view class="prot">
				<image :src='detail.playerImgUrl'></image>
			</view>
			<view class="name">
				<!-- <text class="names">{{detail.playerName}}</text> -->
				编号：
				<text class="serial">{{detail.playerName}}</text>
			</view>
			<view class="num">

				票数:
				<text class="nums">{{detail.totalVote}}</text>
				助力数:
				<text>{{detail.totalRefuel}}</text>
                <button class="u-reset-button gouBtn" @click="goGood">购买商品</button>
			</view>
		</view>
		<view class="nav">
			<view :class="['nav-list', { 'active':current == index}]" v-for="(item,index) in gift" :key='index' @click='choose(item,index)'>

				<view class="gift-fig">
					<image :src='item.giftImgUrl'></image>
				</view>
				<view class="gift-num maincolor">
					+
					<text class="gift-nums ">{{item.voteNumber}}</text>票
				</view>
				<view class="pice" title="艺呗支付">
					<text>{{item.giftName}}</text>
					<text>{{item.integralValue}}</text>艺呗
				</view>
				<view v-if="item.isFree == 1 && item.freeRemainNumber !=0" style="color: red;font-size: 22rpx;">
					<text >可免费投{{item.freeRemainNumber}}次</text>
				</view>
			</view>



			<view class="prompt">
				<!-- 活动重在参与，意在宣传推广，不提倡购买！ 支付成功不支持退款，请谨慎操作！ -->
			</view>

		</view>
		<view class="footer getmain">
			<view class="waht">
				<view class="maincolor" style='height:40rpx;' >{{giftName}} {{giftPrice}}艺呗</view>
				<!-- <view class='spec' v-if='userinfo.integral == null'>
					助力需要登录
				</view> -->
				<view class='spec'>
					账户余额：{{userInfo.integral}}艺呗
				</view>
			</view>
			<view class="pay" @click='tapsubmit'>
				艺呗支付
			</view>
		</view>

		 <u-modal :show="addshow" title="确定投票吗？"  @cancel='addshow = false' @confirm='confirm' :closeOnClickOverlay="true" showCancelButton confirmColor='#e8565c'>
			 
			
		 	
		 </u-modal>
		 <u-modal :show="addshow2" title="您正在参与本赛事的免费人气排行投票拉票，即将进入购买冠名方产品兑换投票资格？"  @cancel='addshow2 = false' @confirm='goGood' :closeOnClickOverlay="true" showCancelButton confirmColor='#e8565c'>
		 			 
		 			
		 	
		 </u-modal>

		
		
	</view>
</template>

<script>
	import {
		getvoteListApi,getCompetitionPlayerDetailApi,getrefuelGiftApi
		,getCompetitionPlayerVoteApi,getNewToken
	} from '@/config/api.js'
	export default {
		data() {
			return {
				playerId: '',
				detail:{},
				gift:[],
				giftPrice:'',
				giftName:'',
				userInfo:{},
				current:999,
				giftId:'',
				addshow:false,
				addshow2:false,
			};
		},
		onLoad(option) {
			console.log(option)
			this.playerId = option.playerId
			this.competitionId = option.competitionId,
			this.institutionId = option.institutionId
			this.$checkLogin(1).then(res=>{
				this.getDetail()
			})
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			choose:function(e,index){
			    console.log(e)
			    this.current= index
				this.giftId = e.id
				this.giftName = e.giftName
				this.giftPrice = e.integralValue
				if(this.userInfo.integral < e.integralValue){
					this.addshow2 = true
				}
			    // if (e.currentTarget.dataset.url != '' && e.currentTarget.dataset.url != null){
			    //   url = e.currentTarget.dataset.url
			    // }
			    // this.setData({
			    //   chooid:e.currentTarget.id,
			    //   choo: e.currentTarget.dataset.index,
			    //   price: e.currentTarget.dataset.price,
			    //   name: e.currentTarget.dataset.name,
			    // })
			    // if (e.currentTarget.dataset.gifttype == 2) {
			    //   this.pay();
			    // }
			  },
			tapsubmit(){
			   if(this.giftId == ''){
				   uni.$u.toast('请选择礼物')
				   return
			   }
			   this.addshow =true
				
			},
			confirm(){
				getCompetitionPlayerVoteApi({
				   playerId:this.playerId,
				   giftId:this.giftId
				}).then(res=>{
					// uni.$u.toast('投票成功')
					uni.showToast({
						title:'投票成功',
						duration:3000
					})
					this.addshow =false
					getNewToken().then(res=>{
						this.userInfo = uni.getStorageSync('userInfo')
						this.getDetail()
					})
					
				}).catch(err=>{
					// console.log(err)
					this.addshow = false
					if(err.code == '00001'){
						 setTimeout(()=>{
							 uni.navigateTo({
							 	url:'/pages/goods/goodList?competitionId=' + this.competitionId + '&playerId=' +this.playerId
							 })
						 },500)
					}
				})
			},
			goGood(){
				uni.navigateTo({
					url:'/pages/goods/goodList?competitionId=' + this.competitionId + '&playerId=' +this.playerId
				})
			},
			getList() {
					
				getrefuelGiftApi({
					playerId: this.playerId
				}).then(res => {
                     this.gift = res
				})
			},
			//选手详情
			getDetail() {

				getCompetitionPlayerDetailApi({
					
					playerId: this.playerId
				}).then(res => {
					this.getList()
					res.img = res.playerImgUrl.split(',')
					this.detail = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/e_help/e_help.wxss */
	.votes {
		// background: #f2f2f2;
		height: 100vh;
	}

	.active {
		// border: 1rpx solid #F861A9;
		box-sizing: border-box;
		background-color: $u-primary !important;
	}

	.top {
		position: fixed;
		top: 0px;
		width: 100%;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.prot {
		width: 90rpx;
		height: 90rpx;
		float: left;
		margin-right: 20rpx;
	}

	.prot>image {
		width: 100%;
		height: 100%;
	}

	.name {
		font-size: 30rpx;
		font-weight: 700;
	}

	.num {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #B7B7B7;
	}
  .gouBtn{
	  float: right;
	  width: 130rpx;
	  height: 50rpx;
	  background-color: $uni-color-primary;
	  color: #FFFFFF;
	  line-height: 50rpx;
	  margin-top: -15rpx;
  }
	.nums {
		margin-right: 40rpx;
	}

	.nav {
		margin-top: 140rpx;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		width: 100%;

	}

	.nav-list {
		margin-top: 20rpx;
		display: inline-block;
		width: calc((100% - 80rpx)/3);
        height: 334rpx;
		overflow: hidden;
		background: #000;
		text-align: center;
		margin-left: 20rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
	}

	.bord {
		border: 2px solid #FF0000;
		box-sizing: border-box;
	}

	.gift-fig {
		overflow: hidden;
	}

	.gift-fig image {
		width: 100%;
		height: 200rpx;
	}

	.gift-num {
		line-height: 60prx;
		color: $uni-color-primary;
		font-size: 26rpx;
	}

	.prompt {
		width: calc(100% - 296rpx);
		margin-left: 148rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
		color: #8D8D8D;
		font-size: 22rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		background: #FFFFFF;
		line-height: 80rpx;
	}

	.waht {
		float: left;
		margin-left: 20rpx;
		color: #000000;
		font-size: 26rpx;
	}

	.pay {
		float: right;
		background: $uni-color-primary;
		width: 180rpx;
		height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 100rpx;
	}

	.waht {
		color: $uni-color-primary;
	}

	.pice {
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spec {
		// color: #000000;
	}

	
</style>
